    <style include="cr-icons cr-hidden-style">
      :host {
        align-items: center;
        background-color: var(--cr-toolbar-background-color);
        color: var(--google-grey-900);
        display: flex;
        height: var(--cr-toolbar-height);
      }

      @media (prefers-color-scheme: dark) {
        :host {
          border-bottom: var(--cr-separator-line);
          box-sizing: border-box;
          color: var(--cr-secondary-text-color);
        }
      }

      h1 {
        flex: 1;
        font-size: 170%;
        font-weight: var(--cr-toolbar-header-font-weight, 500);
        letter-spacing: .25px;
        line-height: normal;
        margin-inline-start: 6px;
        padding-inline-end: 12px;
        white-space: var(--cr-toolbar-header-white-space, normal);
      }

      @media (prefers-color-scheme: dark) {
        h1 {
          color: var(--cr-primary-text-color);
        }
      }

      #leftContent {
        position: relative;
        transition: opacity 100ms;
      }

      #leftSpacer {
        align-items: center;
        box-sizing: border-box;
        display: flex;
        /* 12px to match #rightSpacer + 6px to align with icons in menus. */
        padding-inline-start: calc(12px + 6px);
        width: var(--cr-toolbar-left-spacer-width, auto);
        /* OHOS_ARKWEB_EXTENSIONS */
        min-width: 160px;
      }

      cr-icon-button {
        --cr-icon-button-size: 32px;
        min-width: 32px;
      }

      @media (prefers-color-scheme: light) {
        cr-icon-button {
          --cr-icon-button-fill-color: currentColor;
          --cr-icon-button-focus-outline-color: var(--cr-focus-outline-color);
        }
      }

      #centeredContent {
        display: flex;
        flex: 1 1 0;
        justify-content: center;
      }

      #rightSpacer {
        padding-inline-end: 12px;
      }

      :host([narrow]) #centeredContent {
        justify-content: flex-end;
      }

      :host([has-overlay]) {
        transition: visibility var(--cr-toolbar-overlay-animation-duration);
        visibility: hidden;
      }

      :host([narrow][showing-search_]) #leftContent {
        opacity: 0;
        position: absolute;
      }

      :host(:not([narrow])) #leftContent {
        flex: 1 1 var(--cr-toolbar-field-margin, 0);
      }

      :host(:not([narrow])) #centeredContent {
        flex-basis: var(--cr-toolbar-center-basis, 0);
      }

      :host(:not([narrow])[disable-right-content-grow]) #centeredContent {
        justify-content: start;
        padding-inline-start: 12px;
      }

      :host(:not([narrow])) #rightContent {
        flex: 1 1 0;
        text-align: end;
      }

      :host(:not([narrow])[disable-right-content-grow]) #rightContent {
        flex: 0 1 0;
      }

      picture {
        display: none;
      }

      #menuButton {
        margin-inline-end: 9px;
      }

      #menuButton ~ h1 {
        margin-inline-start: 0;
      }

      :host([always-show-logo]) picture,
      :host(:not([narrow])) picture {
        display: initial;
        margin-inline-end: 16px;
      }

      :host([always-show-logo]) #leftSpacer,
      :host(:not([narrow])) #leftSpacer {
        /* 12px to match #rightSpacer + 9px to align with icons in menus. */
        padding-inline-start: calc(12px + 9px);
      }

      :host([always-show-logo]) :is(picture, #product-logo),
      :host(:not([narrow])) :is(picture, #product-logo) {
        height: 24px;
        width: 24px;
      }
    </style>
    <div id="leftContent">
      <div id="leftSpacer">
        <template is="dom-if" if="[[showMenu]]" restamp>
          <cr-icon-button id="menuButton" class="no-overlap"
              iron-icon="cr20:menu" on-click="onMenuTap_"
              aria-label$="[[menuLabel]]"
              title="[[menuLabel]]">
          </cr-icon-button>
        </template>
        <slot name="product-logo">
          <picture>
            <source media="(prefers-color-scheme: dark)"
                srcset="//resources/images/chrome_logo_dark.svg">
            <img id="product-logo"
                srcset="chrome://theme/current-channel-logo@1x 1x,
                        chrome://theme/current-channel-logo@2x 2x"
                role="presentation">
          </picture>
        </slot>
        <h1>[[pageName]]</h1>
      </div>
    </div>

    <div id="centeredContent" hidden$="[[!showSearch]]">
      <cr-toolbar-search-field id="search" narrow="[[narrow]]"
          label="[[searchPrompt]]" clear-label="[[clearLabel]]"
          spinner-active="[[spinnerActive]]"
          showing-search="{{showingSearch_}}"
          autofocus$="[[autofocus]]">
      </cr-toolbar-search-field>
      <iron-media-query query="(max-width: [[narrowThreshold]]px)"
          query-matches="{{narrow}}">
      </iron-media-query>
    </div>

    <div id="rightContent">
      <div id="rightSpacer">
        <slot></slot>
      </div>
    </div>
